<template>
  <!-- 内容 -->
  <div class="taskManagement_container">
    <div class="tm_c_wrap">
      <!-- 左边导航 -->
      <div class="tm_c_menu">
        <div class="tm_c_menu_option">
          <div class="tm_c_menu_top">
              <div class="tm_c_menu_top_title">平台</div>
            </div>
          <!-- 搜索 -->
          <!-- <div class="tm_c_menu_search">
            <el-input
              size="mini"
              placeholder="请输入平台名称"
              v-model="keyword"
              clearable
              @keyup.enter.native="platformList"
            >
              <el-button
                slot="append"
                size="mini"
                icon="el-icon-search"
                @click="platformList"
              ></el-button>
            </el-input>
          </div> -->
        </div>
        <!-- 列表 -->
        <div class="tm_c_menu_list">
          <div
            class="item"
            v-for="(item, index) in platformList"
            :class="platformListActive.id === item.id ? 'itemActive' : ''"
            :key="index"
            @click="routeTo(item.id)"
          >
            <div>{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- 右边表格 -->
      <div class="tm_c_table">
        <div class="setOfLayer">
          <div class="table_head">
            <div class="table_head_btn">
              <div
                class="el-icon-circle-plus-outline addTask"
                @click="handleConfigInfo"
              >
                添加配置
              </div>
            </div>

            <div class="table_head_right">
              <div class="tm_c_menu_search">
                <el-input
                  size="mini"
                  placeholder="请输入配置名称"
                  v-model="queryForm.configName"
                  clearable
                  @keyup.enter.native="platformList"
                >
                  <el-button
                    slot="append"
                    size="mini"
                    icon="el-icon-search"
                    @click="search"
                  ></el-button>
                </el-input>
              </div>
            </div>
          </div>
          <div class="table_line"></div>
          <div class="table_list">
            <el-table :data="tableData" size="mini" style="width: 100%">
              <el-table-column
                align="center"
                label="配置ID"
                show-overflow-tooltip
                prop="configId"
                :rander-header="renderHeader"
                width="60"
              />
              <el-table-column
                align="center"
                label="配置名称"
                show-overflow-tooltip
                prop="configName"
                :rander-header="renderHeader"
                width="100"
              />
              <el-table-column
                v-for="(column, index) in columnList"
                :key="index"
                align="center"
                show-overflow-tooltip
                :fixed="column.fixed"
                :prop="column.key"
                :label="column.name"
              />
              <el-table-column width="120" label="操作">
                <template slot-scope="scope">
                  <div class="optionIng">
                    <span class="operating" @click="handleConfigInfo(scope.row)"
                      >编辑</span
                    >
                    <span
                      class="danger operating"
                      @click="handleDelete(scope.row.configId)"
                      >删除</span
                    >
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="table_page">
            <!-- 分页 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageIndex"
              :page-sizes="[25, 50, 100, 150]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.total"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 添加配置弹窗 -->
    <config-dialog :dialogVisible.sync="configVisible" :platform="platformListActive.id" :configId="configId"
    :fields="columnList" :configData="configData"
    v-if="isConfigDailog"></config-dialog>
  </div>
</template>
<script>
import {pageConfig,  getPlatform, deleteConfigById } from '@/api/messageApi';
export default {
  components: {
    ConfigDialog: () => import('./component/configDialog.vue')
  },
  data() {
    return {
      keyword: "",
      //选中的平台
      platformListActive: {},
      //选中的数据
      configData: {},
      page: {
        pageIndex: 1,
        pageSize: 25,
        total: 0,
      },
      searchTypeList: [{ label: "配置名称", id: 0 }],
      queryForm: {
        configName: null,
        plagform: "EMAIL",
        pageIndex: 1,
        pageSize: 10
      },
      // 表头数据
      columnList: [],
      // 表格数据
      tableData: [],
      // 添加弹窗是否开启
      configVisible: false,
      platformList: [],
      configId: 0,
      isConfigDailog: false,
      deleteName: "",
      deleteDialogVisible: false,
      taskGroupIds: "",
      isGroup: true,
    };
  },
  methods: {
    handleConfigInfo(row) {
      this.configId = row.configId;
      this.configData = row;
      this.configVisible = true;
      this.isConfigDailog = true;
    },
    async handleDelete (configId) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      // 点击确定 返回值为：confirm
      // 点击取消 返回值为： cancel
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消删除')
      } else {
        let res = await deleteConfigById(configId);
        if (200 == res.code) {
          this.$message({
          message: "操作成功",
          type: "success",
        });
        }
        this.queryConfig()
      }
    
    },
    renderHeader (h, { column }) {
      debugger
      return (
        <el-tooltip
          class="item"
          effect="dark"
          content={column.label}
          placement="top"
        >
          <span>{column.label}</span>
        </el-tooltip>
      )
    },
    async queryConfig () {      
      //查列表数据和表头
      let res = await pageConfig({
        configName: this.queryForm.configName,
        pageIndex: this.queryForm.pageIndex,
        pageSize: this.queryForm.pageSize,
        platform: this.queryForm.platform
      })
      this.page.total = res.data.page.total
      this.tableData = res.data.page.dataList
      this.columnList = res.data.columnList
    },
    async init () {
      let res = await getPlatform();
      this.platformList = res.data;
      //默认选择第一个平台
      this.platformListActive = this.platformList[0]
      this.queryForm.platform = this.platformListActive.id
      this.queryConfig()
    },
    search () {
      this.queryConfig()
    },
    handleSizeChange (val) { // 分页数 每页几条
      this.queryForm.pageSize = val
      this.queryForm.pageIndex = 1
      this.queryConfig()
    },
    handleCurrentChange (val) {
      this.page.pageIndex = val
      this.queryConfig()
    },
    //平台路由
    routeTo (platform) {
      if (platform) {
        for (const m of this.platformList) {
          if (m.id === platform) {
            this.platformListActive = m
            this.queryForm.platform = this.platformListActive.id
            this.queryForm.configName = ''
            this.queryConfig()
            return
          }
        }
      }
      // this.queryConfig()
    },
  },
  mounted: function () {
    //加载数据
    this.init();
  },
};
</script>
<style lang="less" scoped>
.taskManagement_container {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  box-sizing: border-box;
  background-color: #ddedff;
  .tm_c_wrap {
    width: 100%;
    height: 100%;
    display: flex;
    .tm_c_menu {
      width: 240px;
      border-radius: 4px;
      background-color: #fff;
      height: 100%;
      margin-right: 16px;
      padding: 10px 16px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .tm_c_menu_option {
        .tm_c_menu_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 10px;
          .tm_c_menu_top_title {
            font-size: 16px;
            font-weight: 500;
            color: rgba(29, 35, 52, 1);
          }
        }
      }
      .tm_c_menu_list {
        flex: 1;
        overflow-y: auto;
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          width: calc(100% - 10px);
          height: 32px;
          background: rgba(232, 236, 242, 1);
          border-radius: 4px;
          font-size: 12px;
          margin: 5px;
          line-height: 32px;
          text-align: center;
          font-weight: 400;
          color: #656975;
          box-sizing: border-box;
          cursor: pointer;
          div {
            flex: 1;
            white-space: nowrap;
            //overflow: hidden;
            text-overflow: ellipsis;
          }
          &:hover {
            background: rgba(0, 120, 255, 1);
            color: rgba(255, 255, 255, 1);
          }
        }
        .itemActive {
          width: calc(100% - 10px);
          height: 32px;
          background: rgba(0, 120, 255, 1);
          border-radius: 4px;
          font-size: 12px;
          font-weight: 400;
          line-height: 32px;
          text-align: center;
          margin: 5px;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
    .tm_c_table {
      height: 100%;
      width: 100%;
      flex: 1;
      overflow-y: auto;
      padding: 10px 16px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 4px;
      // overflow: hidden;
      .table_head {
        height: 50px;
        display: flex;
        -webkit-flex-direction: row-reverse;
        align-items: center;
        flex-direction: row-reverse;
        .table_head_btn {
          margin-left: 10px;
          .addTask {
            flex-shrink: 0;
            margin-left: 10px;
            cursor: pointer;
            color: rgba(0, 120, 255, 1);
            font-size: 16px;
            font-weight: 500;
          }
        }
        .table_head_right {
          margin-right: 10px;
        }
      }
      .table_line {
        // overflow: hidden;
        padding: 10px 0;
        font-size: 12px;
        font-weight: 400;
        color: rgba(101, 105, 117, 1);
        display: flex;
        border-bottom: 1px solid rgba(195, 198, 204, 1);
      }
      .table_list {
        height: 100%;
      }
      .table_page {
        text-align: center;
        margin-bottom: 10px;
      }
    }
  }
}
.setOfLayer {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.preState {
  display: inline-block;
  padding-left: 10px;
}
.info {
  color: #909399;
}
.success {
  color: #67c23a;
}
.primary {
  color: #409eff;
}
.operating {
  font-size: 12px;
  font-weight: 400;
  color: rgba(0, 120, 255, 1);
  display: inline-block;
  padding: 0 5px;
  cursor: pointer;
}
.danger {
  color: #f56c6c;
}
.optionIng {
  display: flex;
  span {
    margin-right: 15px;
  }
}
.el-table {
  margin-top: 0px;
  // overflow: hidden;
}
.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper {
  overflow: visible;
}
.el-table__body-wrapper {
  overflow-x: visible !important;
}
</style>
